<template v-if="status">
<div style="position: relative">
    <div class='onck1' id="onck1" v-show="foc">
        <div>
            <div>
                <h2>选择城市</h2>
            </div>
            <div @click="all">
                <ul id="city">
                    <li>上海</li>
                    <li>北京</li>
                    <li>深圳</li>
                    <li>杭州</li>
                    <li>南京</li>
                    <li>成都</li>
                    <li>大连</li>
                    <li>广州</li>
                    <li>苏州</li>
                    <li>天津</li>
                    <li>重庆</li>
                    <li>武汉</li>
                    <li>西安</li>
                    <li>郑州</li>
                    <li>宁波</li>
                    <li>嘉兴</li>
                </ul>
            </div>
            <div @click="foc_c"><img src="/img/close.png" alt=""></div>
        </div>
    </div>
    <div :class="{'tishi':tishi,'tishi2':!tishi}" id='tishi'>
        <div style="text-align: center;transform: scale(0.5,0.5);margin-left: -29px;margin-top: -10px;width: 200%;height: 200%;line-height:40px;">{{msg}}</div>
    </div>
    <my-hearder></my-hearder> 
  <main>
        <div  style="position: relative;min-width: 1190px;background-color: #f9f8f6;height:auto"><img src="/img/createhouse_img.png" alt="" style="width: 100%;min-width: 1190px;height:520px">
            <div id="app" style="position: absolute; width: 215px; height: 80px;background-color:#EE3843; top: 75%;right: 30%;border-radius: 40px;text-align: center;font-size: 22px; line-height: 80px;cursor: pointer;">
                <a style='color: white;text-decoration: none;'>马上发布</a></div>
                 
        </div>
        <div  style="background-color: #f9f8f6;">
            <div style="width: 1190px;margin: 0 auto;margin-top: 0;" id='fabu'>
                <h1 style="margin: 0;font-weight:bold;font-size: 30px;color: #3a3b3c;text-align: center;">填写您的基本信息,<span style="color:red;margin-left: 10px;">巴乐兔</span>工作人员会尽快与您联系确认</h1>
                <div class="main-a" id='xinxi'>
                    <div :class="{'title':title==1}">1.提交基本信息</div>
                    <div :class="{'title':title==2}">2.提交详细信息</div>
                    <div :class="{'title':title==3}">3.提交成功</div>
                </div>
                <div class="biao">
                    <ul id='biao1' v-show="a==1">
                        <li><span>姓名</span><input type="text" id="姓名" autocomplete="off" v-model="uname"></li>
                        <li><span>电话</span><input type="text" id="电话" autocomplete="off" v-model="phone"></li>
                        <li><span>城市名称</span><input type="text" @focus="show"  autocomplete="off" v-model="city"></li>
                        <li style="position:relative">
                            <span>小区名称</span><input @keypress="search" type="text" :placeholder='plh' autocomplete="off" id="小区名称" v-model="xiaoqu">
                            <div v-show="tx" style="position: absolute;
    z-index: 612;
    background-color: white;
    border: none;
    width: 262px;
    left: 100px;
    top: 37px;
    border-radius: 0px;
    overflow-x: auto;
    height: 239px;
    box-shadow: 1px 1px 5px grey;"><ul>
            <li id="xxx" @mouseenter='ent' @click="choos" v-for="str,i of arr" :key="i" style="">{{str}}</li>
        </ul></div>
                        </li>
                        <li style="display: flex;justify-content: center;">
                            <div style=";cursor: pointer;" @click="zheng" id='zheng' :class="{'choose':choose,}" >整租房源</div>
                            <div style="cursor: pointer;" @click="he" id='he' :class="{'choose':!choose,}">合租房源</div>
                        </li>
                        <li @click="next" style="cursor: pointer;">下一步</li>
                    </ul>
                    <ul id='biao2'  v-show="a==2" class="biao2">
                       <li style="margin-right: 110px;"><span>租房类型</span><input id='leixing2' type="text" value="合租" style="border: 0;background-color: #f9f8f6;font-size: 16px;" disabled></li>
                        <li><span>租金报价</span><input type="text" v-model="price"><span>元/月</span></li>
                        <li><span>整套面积</span><input type="text" v-model="area"><span>平</span></li>
                        <li><span>户型</span><input type="text" v-model="shi"><span>室</span><input type="text" v-model="ting"><span>厅</span><input type="text" v-model="wei"><span>卫</span></li>
                        <li><span>楼层</span><input type="text" v-model="floor"><span>层共</span><input type="text" v-model="zong"><span>层</span></li>
                        <li><span>楼房类型</span><button>楼梯房</button><button>电梯房</button></li>
                        <li><span>起租日期</span>
    <el-date-picker class="time"
      v-model="value1"
      type="date"
      placeholder="选择日期"
      format="yyyy-MM-dd">
    </el-date-picker>
 </li>
                        <li><span>房源照片</span><button>点击上传</button></li>
                        <li><span>房源描述</span><textarea v-model="desc" maxlength="64"></textarea></li>
                        <li><span>房源设施</span><button>点击添加</button></li>
                         <li>234234</li>
                        <li> <span @click="back">上一步</span><span @click="end">完成</span></li>
                       
                    </ul>
                    <ul id='biao3' v-show='a==0' class="biao3">
                        <li style="margin-right: 110px;"><span>租房类型</span><input id='leixing3' type="text" value="整租" style="border: 0;background-color: #f9f8f6;font-size: 16px;" disabled></li>
                        <li><span>租金报价</span><input type="text" v-model="price"><span>元/月</span></li>
                        <li><span>整套面积</span><input type="text" v-model="area"><span>平</span></li>
                        <li><span>户型</span><input type="text" v-model="shi"><span>室</span><input type="text" v-model="ting"><span>厅</span><input type="text" v-model="wei"><span>卫</span></li>
                        <li><span>楼层</span><input type="text" v-model="floor"><span>层共</span><input type="text" v-model="zong"><span>层</span></li>
                        <li @click="type_lou"><span>楼房类型</span><button :class="{btn:btn}">楼梯房</button><button :class="{btn:!btn}">电梯房</button></li>
                        <li><span>起租日期</span>  <el-date-picker class="time"
      v-model="value1"
      type="date"
      placeholder="选择日期"
      format="yyyy-MM-dd"
      focus='axa'>
    </el-date-picker></li>
                        <li><span>房源照片</span><button>点击上传</button></li>
                        <li><span>房源描述</span><textarea v-model="desc" maxlength="64"></textarea></li>
                        <li><span>房源设施</span><button>点击添加</button></li>
                        <li> <span @click="back">上一步</span><span @click="end">完成</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="m-foo" style="background-color: #f2f2f2;padding: 50px 0;">
            <div>
                <div style="width: 750px; height: 115px;">
                    <div style="display: inline-block;margin: auto 0;"><img src="/img/creat_house_c.png" style="padding-bottom: 15px;"></div>
                    <div style="display: inline-block;margin-left: 50px;">
                        <span style="color: red; font-weight: 700; margin-top: 9px; display: inline-block;">10106006</span>
                        <p>直接拨打热线客服也可以哦</p>
                        <p>工作时间:周一~周日 8:00~23:00</p>
                    </div>
                </div>
                <div>
                    <div style="height: 115px;">
                        <div style="display: inline-block;margin: auto 0;"><img src="/img/code.png"></div>
                        <div style="display: inline-block;margin-left: 50px;">
                            <span style="color: red; font-weight: 700;display: inline-block;">关注巴乐兔公众号</span>
                            <p>点击公众号下的“发布”就可以</p>
                            <p>发布房源啦～</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <my-footer></my-footer>
    </div>
</template>
<script>
import MyFooter from '../components/MyFooter.vue';
import MyHearder from '../components/MyHearder.vue';
export default {
  components: { MyFooter, MyHearder },
    data(){
        return{
            plh:'',
            value1: '',
            a:1,
            choose:true,
            title:1,
            c:0,
            phone:'',
            tishi:true,
            msg:'',
            uname:'',
            xiaoqu:'',
            city:'',
            foc:false,
            price:'',
            area:'',
            floor:'',
            zong:'',
            lou:'',
            tim:'',
            shi:'',
            ting:'',
            wei:'',
            xing:'',
            type:'',
            desc:'',
            btn:true,
            qq:[],
            tx:false,
            arr:[],
            status:false
        }
    },
    methods:{
        choos(e){
            if(e.target.innerText!='没有找到你要的小区？'&&e.target.innerText!='请联系客服，客服电话10106006') {
                this.xiaoqu=e.target.innerText
            }else
            this.xiaoqu=''
            this.tx=false
        },
        search(){
            
        },
        ent(e){
            this.plh=e.target.innerText
        },
        axa(){
            alert('a')
        },
        type_lou(e){
            if(e.target.nodeName=='BUTTON'){
                e.target.innerHTML=='楼梯房'?this.btn=true :this.btn=false;
            }
        },
        zheng(){
            this.choose=true;
            this.c=0;
        },
        next(){
            if(this.uname==''){
                if(this.tishi){
                this.msg=`请填写姓名`;
                this.tishi=false;
                setTimeout(()=>{ 
                this.tishi=true;},2000)
                }
               return
            }else if(this.phone==''){
                if(this.tishi){
                this.msg=`请填写电话`;
                this.tishi=false;
                setTimeout(()=>{ 
                this.tishi=true;},2000)
                }
               return
            }else if(this.city==''){
                if(this.tishi){
                this.msg=`请填写城市`;
                this.tishi=false;
                setTimeout(()=>{ 
                this.tishi=true;},2000)
                }
               return
            }else if(this.xiaoqu==''){
                if(this.tishi){
                this.msg=`请填写小区`;
                this.tishi=false;
                setTimeout(()=>{ 
                this.tishi=true;},2000)
                }
               return
            }
            else if(!/^1[3-9]\d{9}$/.test(this.phone)){
                if(this.tishi){
                this.msg='您的电话有误'
                this.tishi=false;
                setTimeout(()=>{ 
                this.tishi=true;},2000)
                }
               return
            }
            this.a=this.c;
            this.title++;
             (function scrollWindow(){
  window.scrollTo(100,500);
})();
        },
        all(e){
            this.tx=false;
            this.xiaoqu=''
            this.arr=[]
            var str =[]
           if(e.target.nodeName=='LI'){
              this.city=e.target.innerHTML;
              this.foc=false
              this.axios.get('/v1/house/xiaoqu',{params:{city:this.city}}).then(res=>{
            for( var i of res.data){
                str.push(i.sname)
            }
            this.qq=str;
            
        })
           }
        },
        he(){
            this.choose=false;
            this.c=2;
        },
        back(){
            this.title--;
            this.a=1;
            (function scrollWindow(){
  window.scrollTo(100,500);
})();
        },
        show(){
            this.foc=true
        },
        foc_c(){
            this.foc=false
        },
        end(){
            if(this.price==''){
                if(this.tishi){
                this.msg=`请填写租金`;
                this.tishi=false;
                setTimeout(()=>{ 
                this.tishi=true;},2000)
                }return
                }else if(this.area==''){
                if(this.tishi){
                this.msg=`请填写面积`;
                this.tishi=false;
                setTimeout(()=>{ 
                this.tishi=true;},2000)
                }
               return
            }else if(this.shi==''){
                if(this.tishi){
                this.msg=`请填写室数量`;
                this.tishi=false;
                setTimeout(()=>{ 
                this.tishi=true;},2000)
                }
               return
            }else if(this.ting==''){
                if(this.tishi){
                this.msg=`请填写厅数量`;
                this.tishi=false;
                setTimeout(()=>{ 
                this.tishi=true;},2000)
                }
               return
            }else if(this.wei==''){
                if(this.tishi){
                this.msg=`请填写卫数量`;
                this.tishi=false;
                setTimeout(()=>{ 
                this.tishi=true;},2000)
                }
               return
            }
            else if(this.floor==''){
                if(this.tishi){
                this.msg=`请填写楼层`;
                this.tishi=false;
                setTimeout(()=>{ 
                this.tishi=true;},2000)
                }
               return
            }
               
            this.choose?this.type='整租':this.type='合租';
            var xx = this.choose?1:0;
            this.xing= `${this.shi}室${this.ting}厅${this.wei}卫`
            this.tim =new Date().getTime();
            this.lou=`${this.floor}/${this.zong}`;
            // var aa= this.price<1500?0:this.price<2000?1:this.price<3000?2:this.price<5000?3:4;
            // let str =new URLSearchParams();
            // str.append("p_type",aa)
            // str.append("cname",this.city);
            // str.append('sname',this.xiaoqu);
            // str.append('h_name',this.uname);
            // str.append('h_phone',this.phone);
            // str.append('hfloor',this.lou);
            // str.append('hprice',this.price);
            // str.append('harea',this.area);
            // str.append('h_time',this.tim);
            // str.append('hxing',this.xing);
            // str.append('htype',this.type);
            // str.append('htags',this.desc);
            // str.append('t_type',xx)
            // console.log(this.city)
            this.axios.post("/v1/house/add",`h_name=${this.uname}&h_phone=${this.phone}&h_type=0&cname=${this.city}&snam=${this.xiaoqu}&htags=租金月付/近地铁/朝南/精装修&hprice=${this.price}&hstatus=0&harea=${this.area}&hfloor=${this.lou}&htype=整租&hpay=押一付三&h_time=${this.tim}&h_grade=${(Math.random()*5).toFixed(1)}&hxing=${this.xing}`).then((result)=>{
                if(result.data.msg=='发布成功'){
                    if(this.tishi){
                this.msg=`发布成功`;
                this.tishi=false;
                setTimeout(()=>{ 
                this.tishi=true; this.$router.push('/search')},2000)
                }
                }
    })
        }
    },
    mounted(){
        
    },
    watch:{
        xiaoqu(){
            if(this.city==''){
                if(this.tishi){
                this.msg=`请先填写城市`;
                this.tishi=false;
                setTimeout(()=>{ 
                this.tishi=true;},2000)
                }
               return
            }else{
                var arr=[];
    for (var i = 0; i < this.qq.length; i++) {
      if (this.qq[i].match(this.xiaoqu) != null) {
        arr.push(this.qq[i]);
      }
    }
                this.arr=arr
                this.tx=true
                if(!this.arr.length){
                    this.arr=['没有找到你要的小区？','请联系客服，客服电话10106006']
                }
            }
           
        }
    }
}
</script>

<style >

.biao #xxx{
   margin:0;background-color: white;
    color: black;
    margin: 0px;
    text-align: left;font-size:14px;line-height:50px;text-indent:10px;
}
.biao #xxx:hover{
    cursor: pointer;
    color:red
}
.time .el-icon-date:before {
    margin-left: -65px;
}
.el-picker-panel .el-date-table td{
    padding: 0;
}
.el-picker-panel .el-date-table td span:hover{
    color:#333;
    background-color:#eaeaea ;
}
.el-picker-panel .el-date-table td :hover{
    color:#333333
}
.el-picker-panel .el-date-table td.current:not(.disabled) span{
    background-color:red;
    color: white;
}

.el-picker-panel .el-date-table td.today span {  
     color:red ;
}
 .el-picker-panel  .el-date-table td span{
    border-radius: 0;
}
.biao .time {
    float: none;
    border: 0;
    text-align: none;
    width: auto;
    height: auto;
    line-height: auto;
    margin: auto;
    border-radius: 0;
    font-size: 14px;
  
}
.title{
    color: red;
    border-bottom: 1px solid red;
}
.biao .choose{
    border:1px solid red;
      background-image: url('/img/selected.png');
    background-repeat: no-repeat;
    background-position: 72px 18px;
}
body {
    margin: 0;
    padding: 0;
    font-size: 18px;
}

body .onck {
    position: absolute;
    width: 100%;
    height: 100%;
    /* display: none; */
    visibility: hidden;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
}

.san>li>div>div:nth-child(1) {
    position: absolute;
    top: 0;
    right: 0;
    width: 75px;
    height: 30px;
    background-color: #38393a;
    color: white;
    font-size: 14px;
    line-height: 30px;
}

.san>li>div>div:nth-child(2) {
    position: absolute;
    top: 7px;
    right: -16px;
    border: 8px solid #38393a;
    border-color: transparent transparent transparent #38393a;
}

.san li {
    font-size: 18px;
    height: 55px;
    margin: 10px 0;
    text-align: center;
    line-height: 55px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 0px 9px 2px #cccccc;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.san>li>div {
    visibility: hidden;
}

.tishi {
    font-size: 6px;
    color: white;
    float: left;
    position: sticky;
    width: 58px;
    height: 20px;
    background-color: rgba(100, 99, 98, .9);
    top: calc(50% - 29px);
    left: calc(50% - 10px);
    z-index: 1000;
    visibility: hidden;
}
.tishi2{
    font-size: 6px;
    color: white;
    float: left;
    position: sticky;
    width: 58px;
    height: 20px;
    background-color: rgba(100, 99, 98, .9);
    top: calc(50% - 29px);
    left: calc(50% - 10px);
    z-index: 1000;
    visibility:visible;
    transition:.3s;opacity: 1;
    transform:scale(2,2);
}
.biao3 li:last-child {
    display: none;
}

body .onck1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

body .onck1>div>div {
    width: 400px;
    margin: 0 auto;
}

body .onck1>div>div h2 {
    font-size: 20px;
    font-weight: 400;
    padding: 10px 0;
    margin: 0;
}

body .onck1>div>div:nth-child(2) {
    border-top: 1px solid grey;
    padding: 20px 0;
    height: 143px;
}

body .onck1>div>div:nth-child(2) ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body .onck1>div>div:nth-child(2) ul li {
    float: left;
    width: 80px;
    height: 35px;
    line-height: 35px;
    font-size: 16px;
}

body .onck1>div>div:nth-child(2) ul li:hover {
    cursor: pointer;
    color: red;
}

body .onck1>div>div:nth-child(3) {
    position: absolute;
    width: 20px;
    height: 20px;
    top: -10px;
    right: 0;
    cursor: pointer;
}

body .onck1>div {
    position: sticky;
    width: 500px;
    height: 230px;
    background-color: #ffffff;
    top: calc(50% - 115px);
    left: calc(50% - 250px);
    z-index: 1000;
    border-radius: 5px;
}

.h_right ul {
    margin-left: -40px;
}

body .onck>div {
    position: sticky;
    width: 700px;
    height: 400px;
    background-color: white;
    top: calc(50% - 200px);
    left: calc(50% - 350px);
    z-index: 1000;
    border-radius: 5px;
}

.main-a {
    border-bottom: 1px solid grey;
    height: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
}

/* .main-a>div:first-child {
    color: red;
    border-bottom: 1px solid red;
} */

.biao {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    padding-bottom: 150px;
}

.biao>ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

#biao3 li span {
    margin: 0 10px;
    width: 70px;
    text-align: center;
}

#biao3 li:last-child span {
    color: black
}

#biao3 li:nth-child(6) .btn {
    border: 1px solid red;
    background-image: url('/img/selected.png');
    background-repeat: no-repeat;
    background-position: 55px 15px;
}

#biao3 li:nth-child(6) button {
    background-color: #f9f8f6;
    margin-left: 20px;
    border: 1px solid #d3d3d3;
    height: 35px;
    width: 75px;
}

#biao3 li:nth-child(9) {
    position: relative;
    height: auto;
}

#biao3 li:nth-child(9) span {
    position: absolute;
    top: 0px;
    height: 30px;
    text-align: top;
    line-height: 30px;
}

#biao3 textarea {
    outline: none;
    width: 500px;
    height: 200px;
    resize: none;
    display: inline-block;
    margin-left: 90px;
}

#biao3 li:nth-child(8)>button,
#biao3 li:nth-child(10)>button {
    width: 100px;
    height: 40px;
    border-radius: 4px;
    background-color: #ee3843;
    color: white;
    border: 0;
}

#biao3 li:last-child {
    text-align: center;
    height: 60px;
    line-height: 60px;
}

#biao3 li:last-child span:first-child {
    text-align: center;
    width: 140px;
    height: 50px;
    line-height: 50px;
    background-color: #ee3844;
    color: white;
}

#biao3 li:last-child span:last-child {
    text-align: center;
    width: 140px;
    height: 50px;
    line-height: 50px;
    background-color: #ee3844;
    color: white;
}

#biao3 li:nth-child(7)>input {
    background-image: url('/img/date.png');
    width: 200px;
    background-repeat: no-repeat;
    background-position: 175px 10px;
}

#biao3 li>span:nth-child(3),
#biao3 li>span:nth-child(5),
#biao3 li>span:nth-child(7) {
    width: 40px;
    margin: 0 10px;
}

.biao>ul li {
    height: 50px;
    margin: 20px 0;
    text-align: center;
}

#biao3 li {
    display: block;
    background-color: #f9f8f6;
    text-align: left;
    line-height: 50px;
}

#biao3 li>input {
    width: 70px;
    text-align: center;
}

#biao3 li>span:first-child {
    text-align: right;
}


.biao>ul li:last-child {
    background-color: #ee3844;
    line-height: 50px;
    border-radius: 5px;
    color: white;
    margin: 20px 70px;
    font-size: 18px;
}

.biao>ul li>div {
    float: left;
    border: 1px solid rgb(209, 202, 202);
    text-align: center;
    width: 90px;
    height: 35px;
    line-height: 35px;
    margin: 0 10px;
    border-radius: 5px;
    font-size: 16px;
  
}


#biao2 li span {
    margin: 0 10px;
    width: 70px;
    text-align: center;
}

#biao2 li:last-child span {
    color: black
}

#biao2 li:nth-child(6)>:nth-child(2) {
    border: 1px solid red;
    height: 35px;
    width: 75px;
    background-color: #f9f8f6;
    background-image: url('/img/selected.png');
    background-repeat: no-repeat;
    background-position: 55px 15px;
}

#biao2 li:nth-child(6)>:last-child {
    background-color: #f9f8f6;
    margin-left: 20px;
    border: 1px solid #d3d3d3;
    height: 35px;
    width: 75px;
}

#biao2 li:nth-child(9) {
    position: relative;
    height: auto;
}

#biao2 li:nth-child(9) span {
    position: absolute;
    top: 0px;
    height: 30px;
    text-align: top;
    line-height: 30px;
}

#biao2 textarea {
    outline: none;
    width: 500px;
    height: 200px;
    resize: none;
    display: inline-block;
    margin-left: 90px;
}

#biao2 li:nth-child(8)>button,
#biao2 li:nth-child(10)>button {
    width: 100px;
    height: 40px;
    border-radius: 4px;
    background-color: #ee3843;
    color: white;
    border: 0;
}

#biao2 li:last-child {
    text-align: center;
    height: 60px;
    line-height: 60px;
}
#bioa3 li:last-child{
    background-color: red;
}

#biao2 li:last-child span:first-child {
    text-align: center;
    width: 140px;
    height: 50px;
    line-height: 50px;
    background-color: #ee3844;
    color: white;
}

#biao2 li:last-child span:last-child {
    text-align: center;
    width: 140px;
    height: 50px;
    line-height: 50px;
    background-color: #ee3844;
    color: white;
}

#biao2 li:nth-child(7)>input {
    background-image: url('/img/date.png');
    width: 200px;
    background-repeat: no-repeat;
    background-position: 175px 10px;
}

#biao2 li>span:nth-child(3),
#biao2 li>span:nth-child(5),
#biao2 li>span:nth-child(7) {
    width: 40px;
    margin: 0 10px;
}



#biao2 li {
    display: block;
    background-color: #f9f8f6;
    text-align: left;
    line-height: 50px;
}

#biao2 li>input {
    width: 70px;
    text-align: center;
}

#biao2 li>span:first-child {
    text-align: right;
}


.m-foo>div {
    width: 1190px;
    margin: 0 auto;
}
.m-foo>div p{
    margin: 18px 0;
}
.m-foo>div>div {
    text-align: left;
    font-size: 18px;
    float: left;
}

.m-foo>div::after {
    content: '';
    display: block;
    clear: both;
}

.biao>ul span {
    display: inline-block;
    width: 100px;
    text-align: right;
    margin-right: 10px;
    font-size: 16px;
}

.biao>ul>li>input {
    text-indent: 5px;
    height: 35px;
    width: 260px;
    outline: none;
    border-radius: 3px;
    border: 1px solid rgb(139, 136, 136);
    cursor: text;
}

.main-a>div {
    float: left;
    text-align: center;
    text-align: center;
    width: 150px;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    margin-right: 10px;
}

body .onck>div>div:nth-child(1) {
    margin: 0 auto;
    width: 600px;
    border-bottom: 1px solid #b6b1b1;
}

body .onck>div>div:nth-child(1) h2 {
    display: inline-block;
    padding: 25px 0;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 300;
}

body .onck>div>div:nth-child(1) .fis {
    display: inline-block;
    margin-left: 290px;
    color: grey;
    font-size: 16px;
}

body .onck>div>div:nth-child(1) .fis~span {
    cursor: pointer;
    color: grey;
    font-size: 16px;
}

body .onck>div>div:nth-child(1) .fis~span:hover {
    color: red;
}

body .onck>div>div:nth-child(1) ul {
    list-style: none;
}

body .onck>div>div:nth-child(1) ul li {
    float: left;
}

body .onck>div>div:nth-child(2) {
    margin: 0 auto;
    width: 600px;
    height: 300px;
}

body .onck>div>div:nth-child(2) ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body .onck>div>div:nth-child(2) ul li {
    width: 300px;
    float: left;
    margin: 15px 0;
}

body .onck>div>div:nth-child(2) ul li span {
    display: inline-block;
    width: 30px;
}

body .onck>div>div:nth-child(2) ul li a {
    margin-left: 20px;
    text-decoration: none;
    color: grey;
    font-size: 16px;
}

body .onck>div>div:nth-child(2) ul li a:hover {
    color: red;
}

body .onck>div>div:nth-child(3) {
    position: absolute;
    width: 20px;
    height: 20px;
    top: -10px;
    right: 0;
    cursor: pointer;
}

body header div {
    height: 40px;
    background-color: #ee3843;
}

body header div div {
    font-size: 14px;
    height: 100%;
    margin: 0 auto;
    width: 1190px;
    color: #ffffff;
}

body header div div ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body header div div .h_left {
    width: 800px;
    float: left;
}

body header div div .h_left ul li {
    cursor: pointer;
    position: relative;
    line-height: 40px;
    float: left;
    margin: 0 25px;
}


body header div div .h_left ul li:nth-child(4) div {
    position: absolute;
    width: 56px;
    height: 3px;
    bottom: 0;
    background-color: white;
}

body header div div .h_left ul li span:nth-child(1) {
    display: inline-block;
    width: 20px;
}

body header div div .h_left ul li a {
    color: #ffffff;
    text-decoration: none;
}

body header div div .h_left ul li:hover a {
    color: #fcd7d9;
}

body header div div .h_left ul li:after {
    content: '';
    width: 0;
    height: 3px;
    background: #ffffff;
    position: absolute;
    top: 93%;
    left: 50%;
    transition: .3s;
}

body header div div .h_left ul li:nth-child(2):hover:after,
body header div div .h_left ul li:nth-child(3):hover:after,
body header div div .h_left ul li:nth-child(4):hover:after,
body header div div .h_left ul li:nth-child(5):hover:after,
body header div div .h_left ul li:nth-child(6):hover:after,
body header div div .h_left ul li:nth-child(7):hover:after {
    left: 0%;
    width: 100%;
}

body header div div .h_right {
    width: 120px;
    float: right;
}

body header div div .h_right a {
    color: #ffffff;
    text-decoration: none;
    line-height: 40px;
    padding: 0 10px;
}

body header div div .h_right a:hover {
    cursor: pointer;
    color: #fcd7d9;
}

body footer .f_up {
    height: 190px;
    background-color: #d72a3a;
    background-position: center;
    position: relative;
    /* display: none; */
}

body footer .f_up>div {
    margin: 0 auto;
    width: 1190px;
    height: 100%;
}

body footer .f_up>div div:nth-child(1) {
    width: 200px;
    height: 100%;
    position: absolute;
    top: 21px;
}

body footer .f_up>div div:nth-child(2) {
    margin-left: 300px;
    width: 990px;
    height: 100%;
}

body footer .f_up>div div:nth-child(2) img {
    height: 150px;
    margin-top: 15px;
}

body footer .f_down {
    /* height: 720px; */
    background-color: #3b3d42;
}

body footer .f_down ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body footer .f_down>div {
    width: 1190px;
    height: 100%;
    margin: 0 auto;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(2) {
    border-bottom: 0;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(2)>p {
    margin: 5px 0;
    padding: 0;
    font-weight: 300;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(2)>p img {
    margin-bottom: -4px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(2)>p>span:nth-child(1) {
    display: inline-block;
    width: 300px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) {
    margin-top: 10px;
    width: 1190px;
    border-bottom: 0;
    color: #aaacb3;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(1) {
    float: left;
    width: 650px;
    border-right: 1px solid #595b5f;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2) {
    float: right;
    width: 450px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2) img {
    margin-left: 20px;
    margin-top: 15px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2)>div:nth-child(1) {
    width: 250px;
    float: left;
    border-right: 0;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2)>div:nth-child(2) {
    width: 200px;
    float: left;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li a {
    text-decoration: none;
    color: #aaacb3;
    font-size: 18px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li a:hover {
    color: #fff;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li {
    margin-right: 80px;
    float: left;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li p {
    font-weight: 500;
    margin: 5px 0;
    font-size: 16px;
    color: #8b8d92;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li p:hover {
    color: white;
    cursor: pointer;
}

body footer .f_down>div>div>div {
    border-bottom: 1px solid #595b5f;
    padding-top: 20px;
    padding-bottom: 20px;
}

body footer .f_down>div>div>div ul {
    padding-top: 5px;
}

body footer .f_down>div>div>div>ul li {
    float: left;
    margin-right: 10px;
}

body footer .f_down>div>div>div>ul li a {
    text-decoration: none;
    color: #8b8d92;
}

body footer .f_down>div>div>div>ul li a:hover {
    color: #ffffff;
}

body footer .f_down>div>div>div::after {
    content: '';
    display: block;
    clear: both;
}

body footer .f_down>div p {
    text-align: left !important;
    margin: 0;
    font-weight: 600;
    color: #aaacb3;
}


/*# sourceMappingURL=moban.css.map */
</style>